import ProSwitchButton from '@/components/pro-switch-button/index.vue'
import { ProFormOptions } from '@/components/pro-form/type'

export const useRoleProForm = () => {
  const [roleForm, resetRoleForm] = useProRef<{ [index: string]: any }>({
    validFlag: true
  })
  const roleFormOptions = computed<ProFormOptions>(() => [
    {
      grid: {
        cols: '1'
      },
      columnItemList: [
        {
          formItem: {
            formType: 'input',
            key: 'roleName',
            label: '角色名',
            rule: {
              required: true,
              message: '请输入角色名',
              trigger: ['input']
            },
            placeholder: '请输入角色名'
          }
        },
        {
          formItem: {
            formType: 'input',
            label: '角色编码',
            key: 'roleCode',
            rule: {
              required: true,
              message: '请输入角色编码',
              trigger: ['input']
            },
            placeholder: '请输入角色编码'
          }
        },
        {
          formItem: {
            formType: 'inputNumber',
            label: '显示排序',
            key: 'sortOrder',
            rule: {
              type: 'number',
              required: true,
              message: '请输入显示排序',
              trigger: ['input']
            },
            placeholder: '请输入显示排序'
          }
        },
        {
          formItem: {
            formType: 'custom',
            key: 'validFlag',
            label: '状态',
            render() {
              return (
                <ProSwitchButton
                  v-model:value={roleForm.value.validFlag}
                  checkedValue={1}
                  uncheckedValue={0}
                  checkedText="正常"
                  uncheckedText="停用"
                />
              )
            }
          }
        },
        {
          formItem: {
            formType: 'textarea',
            label: '备注',
            key: 'remark',
            placeholder: '请输入备注'
          }
        }
      ]
    }
  ])

  return {
    roleForm,
    roleFormOptions,
    resetRoleForm
  }
}
